import React from 'react'
import fetchJSONP from 'fetch-jsonp'
import { Spin, Alert,Pagination } from 'antd';
import MovieItem from './MovieItem.jsx'
export default class MovieList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            movieList: [],
            type: props.match.params.type,
            pagenum: parseInt(props.match.params.page) || 1,
            pagesize: 10,
            total: 0,
            isLoading: true,
        }
    }
    componentWillMount() {
        // fetch("http://www.liulongbin.top:3005/api/getnewslist").then(response => {
        //     //第一个.then拿不到数据，可以通过response.json()拿到一个promise对象
        //     return response.json()
        // }).then(response => {
        //     console.log(response)
        // })
        // 可能会遇到跨域问题，故用fetch-jsonp来请求数据
        // fetch("https://douban.uieee.com/v2/movie/in_theaters").then(response => {
        //     return response.json()
        // }).then(response => {
        //     {
        //         console.log(response)
        //     }
        // })
        this.getMovieList()
    }
    componentWillReceiveProps(nextProps) {
        console.log(nextProps.match)
        this.setState({
            isLoading: true,
            pagenum: parseInt(nextProps.match.params.page) || 1,
            type: nextProps.match.params.type,
        }, function () {
            this.getMovieList()
        })
    }
    render() {
        return <div>
            {this.renderList()}
        </div>
    }
    getMovieList = () => {
        const start = this.state.pagesize * (this.state.pagenum - 1)
        const url = `https://douban.uieee.com/v2/movie/${this.state.type}?start=${start}&count=${this.state.pagesize}`
        fetchJSONP(url).then(response => {
            return response.json()
        }).then(data => {
            console.log(data)
            this.setState({
                isLoading: false,
                movieList: data.subjects,
                total: data.total,
            })
        })
        // 使用本地json数据，报错是为啥？？？
        // const data = require("./test_data/in_theaters.json")
        // setTimeout(() => {
        //     this.setState({
        //         isLoading:false,
        //         movieList:data.subjects,
        //         total:data.total,
        //     })
        // }, 1000);
    }
    renderList = () => {
        if (this.state.isLoading) {
            return <Spin tip="Loading...">
                <Alert
                    message="加载中，请稍后"
                    description="精彩内容即将呈现..."
                    type="info"
                />
            </Spin>
        } else {
            return <div>
                <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                    {this.state.movieList.map(item => {
                        return <MovieItem {...item} key={item.id} history={this.props.history}></MovieItem>
                    })}
                </div>
                <Pagination defaultCurrent={this.state.pagenum}  total={this.state.total} 
                onChange={this.pageChanged}/>
            </div>
        }

    }
    pageChanged = (page) => {
        // window.location.href = '/#/movie/' + this.state.type + '/' + page
        this.props.history.push('/movie/' + this.state.type + '/' + page)
    }
}